<style type="text/css">
    .icon-left{
        background: url("${basePath}static/images/icon_left.png") no-repeat;
        background-size: 100% 100%;
    }
    .pressBtn{
        position: relative;
        top: 260px;
        left: -200px;
        cursor: pointer;
    }
    .mleft64 {
        margin-left: 37px !important;
    }
    .layui-layout-right  .layui-nav-item a{
        color: #333;
    }
</style>
<head>
    <base href="${basePath}">
</head>
<div id="layui-header" class="layui-header div-bottom">
    <div class="layui-logo" style="padding: 5px 0;width: auto;">
        <a href="index">
            <img style="width: 195px; margin-left: 10px;" src="${basePath}static/images/logo.png"/>
<!--            <span style="font-size: 23px;color:#BE131C;position: relative;top: 5px;">|&nbsp;&nbsp;煤矿水文监测系统</span>-->
        </a>
    </div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-layout-left">
        <li class="layui-nav-item layadmin-flexible">
            <div href="javascript#;" id="pressId" linkid="press" title="展开/收起" class="pressBtn">
                <i class="layui-icon icon-left" style="display: inline-block;width: 13px;height: 60px;"></i>
            </div>
        </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
        <div class="userInfoBx">
            <img src="" alt="">
        </div>
        <li class="layui-nav-item">
            <a href="javascript:;" style="color: #333;">
                ${Session.sessionUser.userName}
            </a>
            <dl class="layui-nav-child" style="color: #333;">
                <dd><a href="javascript:;" onclick="toEditPassWord()">修改密码</a></dd>
                <dd><a onclick="goBack()" >退出</a></dd>
            </dl>
        </li>
    </ul>
</div>

<div class="layui-side layui-side-menu div-right" id="layui-side-menu">
    <div class="layui-side-scroll">
        <div class="sideInfoBx">
            <div class="sideInfoImg">
                <img src="${basePath}static/images/logobg1.png" alt="">
            </div>
            <div class="sideInfoBxTitle">
                <span>admin</span>
                <p>管理员</p>
            </div>
        </div>
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree layui-bg-black"  lay-filter="test" id="topUl">
        </ul>
    </div>
    <!--<a href="javascript:;" event="flexible" title="展开/收起" style="">-->
    <!--<i class="layui-icon layui-icon-shrink-right" id="bottom-nav"></i>-->
    <!--</a>-->
</div>

<script>
    $(document).ready(function () {
        $('#pressId').click(function () {
          var linkId =  $(this).attr('linkid');
          if (linkId == 'press') {
              // $('#pressId').addClass('left64');
              $('#layui-header').addClass('mleft64')
              $('#layui-side-menu').css({
                  'width': '37px'
              })
              $('.sideInfoImg').css({
                  'width': '28px',
                  'height':'28px'
              })
              $('.layui-body').css({
                  'left': '37px'
              })
              $('#pressId').attr('linkid', '')
          } else {
              // $('#pressId').removeClass('left64');
              $('#layui-header').removeClass('mleft64')
              $('#layui-side-menu').css({
                  'width': '200px',
              })
              $('.sideInfoImg').css({
                  'width': '50px',
                  'height':'50px'
              })
              $('.layui-body').css({
                  'left': '200px'
              })
              $('#pressId').attr('linkid', 'press')
          }
        })
    })


    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //监听导航点击
        element.render();
    });

    loadMenu();
    function loadMenu(){
        $.ajax({
            url : basePath+"system/menu/getMenuByUrl?timestamp="+new Date().getTime(),
            type : "get",
            dataType:"JSON",
            contentType:"application/json",
            async:true,
            success : function(data){

                if(data.status==true){
                    var menu = data.t;
                    $("#topUl").empty();
                    for (var i = 0;i < menu.length;i++){
                        if(menu[i].sysMenus.length > 0){
                            $("#topUl").append('<li class="layui-nav-item"><a href="javascript:;">'+menu[i].menuName+'</a><dl id="'+menu[i].menuId+'" class="layui-nav-child"></dl></li>');
                            for (var j = 0;j < menu[i].sysMenus.length;j++){
                                $("#"+menu[i].menuId).append('<dd style="cursor: pointer"><a onclick="loadPage(\''+menu[i].sysMenus[j].menuUrl+'\',\''+menu[i].sysMenus[j].accessMode+'\')">'+menu[i].sysMenus[j].menuName+'</a></dd>');
                            }
                        }else{
                            if(menu[i].menuUrl == '/loan/company') {
                                $("#topUl").append('<li class="layui-nav-item layui-this"><a onclick="loadPage(\''+menu[i].menuUrl+'\',\''+menu[i].accessMode+'\')">'+menu[i].menuName+'</a></li>');
                            } else {
                                $("#topUl").append('<li class="layui-nav-item"><a onclick="loadPage(\''+menu[i].menuUrl+'\',\''+menu[i].accessMode+'\')">'+menu[i].menuName+'</a></li>');
                            }
                        }
                    }
                    layui.use('element', function(){
                        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
                        //监听导航点击
                        element.render();
                    });
                }
            }
        });
    };


    $(function () {
        $('input, textarea').placeholder();
    });

</script>
